<template>
    <a-layout>
     <a-card title="申请表单">
        <div  v-for="apply in applis" :key="apply.nodeId"  class="icons-list">
          <div style="text-align:center;">
          <a-icon :type="apply.formIcon" :title="apply.formTitle" style="display:block" @click="applyFu(apply)" />
            <span @click="applyFu(apply)" >{{apply.formTitle}}</span>
          </div>
        </div>
     </a-card>
      <!-- 表单申请 -->
    <apply-form
      ref="ApplyForm"
       :username="username"
      :ApplyFormVisiable="ApplyForm.visiable"
      @close="handleApplyFormClose"
      @success="handleApplyFormSuccess">
    </apply-form>
  </a-layout>
</template>
<script>
import ApplyForm from '@/views/dynamicForm/ApplyForm'

export default {
  name: 'ApplyList',
  props: {
    username: {
      require: true
    }
  },
  data () {
    return {
      applis: [],
      ApplyForm: {
        visiable: false
      },
      visible: false,
      confirmLoading: false
    }
  },
  components: {ApplyForm},
  mounted () {
    this.init()
  },
  methods: {
    applyFu: function (node) {
      // 打开申请表单，并传入对应表单json、初始数据
      // 查询表单json
      this.$get('form/' + node.formId).then((r) => {
        this.ApplyForm.visiable = true
        this.$refs.ApplyForm.setFormValues({...r.data, ...node})
      })
    },
    handleApplyFormClose () {
      this.ApplyForm.visiable = false
    },
    handleApplyFormSuccess () {
      this.ApplyForm.visiable = false
      this.$message.success('提交成功')
      this.$emit('applyOk')
    },
    goModal () {
      this.visible = true
      this.$router.push({ path: '/home/ConfigAdd' })
    },
    handleOk () {
      this.confirmLoading = true
      setTimeout(() => {
        this.visible = false
        this.confirmLoading = false
      }, 2000)
    },
    handleCancel () {
      this.visible = false
    },
    init () {
      this.$get('upmpprocess/availablepro', {
        userId: this.username
      }).then((r) => {
        let data = r.data
        this.applis = data.rows
      })
    }
  }
}

</script>
<style scoped>
.icons-list{
  margin-right: 30px;
  display:inline-block
}
.icons-list >>> .anticon {
  margin-right: 6px;
  font-size: 50px;
}
</style>
